<!doctype html>
<html lang="zh-CN">
  <head>
    <title>影视详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link
      href="css/bootstrap.css"
      rel="stylesheet"
      type="text/css"
      media="all"
    />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/medile.css" rel="stylesheet" type="text/css" />
    <link href="css/single.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div id="moviesDetail">
      <!-- header -->
      <div class="header">
        <div class="container">
          <div class="w3layouts_logo">
            <a href="/"
              ><h1>黑马<span>影视</span></h1></a
            >
          </div>
          <div class="w3l_sign_in_register">
            <ul>
              <li>
                <i class="fa fa-phone" aria-hidden="true"></i> 400-618-9090
              </li>
              <li>
                <a href="#" data-toggle="modal" data-target="#myModal">登录</a>
              </li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>

      <!-- 这里是登录的窗口-->
      <div
        class="modal video-modal fade"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModal"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              登录 & 注册
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <section>
              <div class="modal-body">
                <div class="w3_login_module">
                  <div class="module form-module">
                    <div class="toggle">
                      <i class="fa fa-times fa-pencil"></i>
                      <div class="tooltip">点我</div>
                    </div>
                    <div class="form">
                      <h3>账户登录</h3>
                      <form action="#" method="post">
                        <input type="text" placeholder="用户名" required="" />
                        <input type="password" placeholder="密码" required="" />
                        <input type="button" value="登录" />
                      </form>
                    </div>
                    <div class="form">
                      <h3>注册账户</h3>
                      <form action="#" method="post">
                        <input
                          type="text"
                          name="Username"
                          placeholder="用户名"
                          required=""
                        />
                        <input
                          type="password"
                          name="Password"
                          placeholder="密码"
                          required=""
                        />
                        <input
                          type="email"
                          name="Email"
                          placeholder="邮箱"
                          required=""
                        />
                        <input
                          type="text"
                          name="Phone"
                          placeholder="手机号"
                          required=""
                        />
                        <input type="submit" value="注册" />
                      </form>
                    </div>
                    <div class="cta"><a href="#">忘记密码?</a></div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>

      <!--nav-->
      <div class="movies_nav">
        <div class="container">
          <nav class="navbar navbar-default">
            <div
              class="collapse navbar-collapse navbar-right"
              id="bs-example-navbar-collapse-1"
            >
              <nav>
                <ul class="nav navbar-nav">
                  <li class="active"><a href="/">首页</a></li>
                  <li><a href="#">类型 </a></li>
                  <li><a href="#">电视连续剧</a></li>
                  <li><a href="#">最新电影</a></li>
                  <li><a href="#">最热电影</a></li>
                  <li><a href="#">国家</a></li>
                </ul>
              </nav>
            </div>
          </nav>
        </div>
      </div>

      <!-- single -->
      <div class="single-page-agile-main">
        <div class="container">
          <!-- /w3l-medile-movies-grids -->
          <div class="agileits-single-top">
            <ol class="breadcrumb">
              <li><a href="/">首页</a></li>
              <li class="active">影视详情</li>
            </ol>
          </div>
          <div class="single-page-agile-info">
            <!-- /movie-browse-agile -->
            <div class="show-top-grids-w3lagile">
              <div class="single-left">
                <div class="song">
                  <!--标题-->
                  <div class="song-info">
                    <h3 v-text="movie.title">蜘蛛侠：英雄归来</h3>
                  </div>
                  <div class="video-grid-single-page-agileits">
                    <!--电影图片-->
                    <div data-video="dLmKio67pVQ" id="video">
                      <img :src="movie.picPath" alt="" class="img-responsive" />
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>

                <div class="all-comments">
                  <div class="all-comments-info">
                    <a href="#">评论</a>
                    <div class="agile-info-wthree-box">
                      <form>
                        <input type="hidden" />
                        <textarea
                          placeholder="您的评论"
                          required=""
                          v-model="comment.content"
                        ></textarea>
                        <input
                          type="button"
                          value="发表"
                          @click="saveComment()"
                        />
                        <div class="clearfix"></div>
                      </form>
                    </div>
                  </div>
                  <div class="media-grids">
                    <div class="media" v-for="comment in commentList">
                      <h5 v-text="comment.creatorName">迎风尿三丈</h5>
                      <div class="media-left">
                        <a href="#">
                          <img
                            src="images/user.jpg"
                            title="One movies"
                            alt=" "
                          />
                        </a>
                      </div>
                      <div class="media-body">
                        <p v-text="comment.content">
                          剧情不错。英雄归来……每个人儿时都会犯错误…能力超凡高于平常人本身自己也会膨胀的。
                          总想表现自己，证明自己受到拥护，做事总会欠缺考虑不顾大局。
                        </p>
                        <span v-text="comment.time">2020-10-10</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- footer -->
      <div class="footer">
        <div class="container">
          <div class="w3ls_footer_grid">
            <div class="col-md-6 w3ls_footer_grid_left">
              <div class="w3ls_footer_grid_left1">
                <h2>订阅我们</h2>
                <div class="w3ls_footer_grid_left1_pos">
                  <form action="#" method="post">
                    <input
                      type="email"
                      name="email"
                      placeholder="你的邮箱..."
                      required=""
                    />
                    <input type="submit" value="发送" />
                  </form>
                </div>
              </div>
            </div>
            <div class="col-md-6 w3ls_footer_grid_right">
              <a href="index.html"
                ><h2>heima<span>Movies</span></h2></a
              >
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-md-5 w3ls_footer_grid1_left">
            <p>Copyright &copy; 2020.传智播客教育股份有限公司版权所有。</p>
          </div>
          <div class="col-md-7 w3ls_footer_grid1_right">
            <ul>
              <li>
                <a href="genres.html">电影</a>
              </li>
              <li>
                <a href="faq.html">常见问题</a>
              </li>
              <li>
                <a href="horror.html">动作</a>
              </li>
              <li>
                <a href="genres.html">冒险</a>
              </li>
              <li>
                <a href="comedy.html">喜剧</a>
              </li>
              <li>
                <a href="icons.html">图标</a>
              </li>
              <li>
                <a href="contact.html">联系我们</a>
              </li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </body>

  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/axios-0.18.0.js"></script>
  <script type="text/javascript" src="/js/vuejs-2.5.16.js"></script>
  <!--Vue的代码写到这里-->
  <script>
    const app = new Vue({
      el: "#moviesDetail",
      data: {
        movie: {},
        commentList: [],
        comment: {},
      },
      methods: {
        //获取影视详情
        findMovieById(id) {
          axios.get("/single/findMovieById?id=" + id).then((resp) => {
            if (resp.data.code == 1) {
              this.movie = resp.data.data;
            }
          });
        },

        //获取影视评论信息
        findMovieCommentListByMovieId(id) {
          axios
            .get("/single/findMovieCommentListByMovieId?id=" + id)
            .then((resp) => {
              if (resp.data.code == 1) {
                this.commentList = resp.data.data;
              }
            });
        },

        //保存评论信息
        saveComment() {
          this.comment.moviesId = this.movie.id;
          axios.post("/single/saveComment", this.comment).then((resp) => {
            //若保存成功,重新查询评论列表
            if (resp.data.code == 1) {
              //清空表单
              this.comment = {};
              //重新查询
              this.findMovieCommentListByMovieId(this.movie.id);
            }
          });
        },
      },
      watch: {},
      created() {
        let id = location.search.split("=")[1];
        this.findMovieById(id);
        this.findMovieCommentListByMovieId(id);
      },
    });
  </script>
</html>
